<template>
	<view class="detail-wrapper">
		<navBar title="服务投诉"></navBar>
		<view class="h1" :style="{ marginTop: `${getSystemInfo.navBarHeight}px` }">卡友之家服务</view>
		<view class="h2">投诉与建议</view>
		<view class="content">
			<view class="title">
				<view class="item">
					欢迎使用卡友之家服务！我们一直致力于为广大卡友提供优质、高效的服务，让您的生活更加便捷和舒适。我们非常重视您的意见和建议，为了更好地满足您的需求，现在推出“投诉与建议”收集活动。
				</view>
				<view class="item">
					如果您在使用我们的服务中遇到任何问题或有任何建议，请随时联系我们，我们会竭诚为您服务。您可以通过拨打投诉电话的方式向我们提出投诉或建议：
				</view>
				<view>
					我们将认真对待每一条反馈信息，并根据您的反馈意见进行改进和优化，以提高我们的服务水平。同时，我们将定期对反馈信息进行整理和统计，及时发布改进结果，让您对我们的服务质量有更加直观的了解。
				</view>
				<view class="item">
					再次感谢您的支持与信任，我们期待与您一起打造更加美好的卡友之家服务。
				</view>
			</view>
		</view>
		<view class="footer">
			<u-button type="primary" text="拨打投诉电话" @click="callPhone"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	import navBar from '@/components/navBar.vue'
	export default {
		components: {
			navBar
		},
		data() {
			return {

			}
		},
		computed: {
			...mapGetters('global', ['getSystemInfo'])
		},
		methods: {
			callPhone() {
				// 区分设备
				if (uni.getSystemInfoSync().osName === 'ios') {
					uni.makePhoneCall({
						phoneNumber: '400-696-5399'
					})
				} else {
					uni.showModal({
						title: "拨打电话",
						content: '400-696-5399',
						confirmText: "确认",
						cancelText: "取消",
						success: res => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: '400-696-5399'
								})
							}
						}
					})
				}
			}

		},
		onLoad(option) {

		},

	}
</script>

<style lang="scss" scoped>
	.detail-wrapper {
		padding-bottom: 200rpx;

		.h1 {
			padding: 54rpx;
			font-size: 48px;
			font-family: Source Han Sans CN-Bold, Source Han Sans CN;
			font-weight: bold;
			color: rgba(0, 0, 0, 0.85);
		}

		.h2 {
			text-align: right;
			font-size: 48px;
			padding: 54rpx;
			padding-top: 0;
			font-family: Source Han Sans CN-Bold, Source Han Sans CN;
			font-weight: bold;
			color: #CF1A1B;
		}

		.content {
			padding: 20rpx;
			padding-top: 30rpx;
			font-size: 30rpx;

			.title {
				padding: 32rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
			}

			.item {
				margin: 32rpx 0 0;
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			padding: 30rpx;
			width: calc(100% - 60rpx);
			background: #fff;
		}
	}
</style>
